<template>
  <div class="comments">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoadComments"
      id="article-comment-list"
    >
      <comment-cell
        :comment="item"
        v-for="item in list"
        :key="item.id"
      />
    </van-list>
  </div>
</template>

<script>
import { List, Toast } from 'vant'
import CommentCell from './itemcell'
export default {
  components: {
    CommentCell,
    [List.name]: List,
    [Toast.name]: Toast
  },
  name: 'comments',
  props: {
    animate: String,
    color: String
  },
  data () {
    return {
      loading: false,
      finished: false,
      isLoading: false,
      count: 0,
      list: [],
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },
  methods: {
    onLoadComments () {
      console.log('heelle')
      let page = this.meta.currentPage + 1
      this.axios
        .get('/cms/comment', {
          params: { id: this.$route.params.id, page: page },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    listenCommentLiked () {
      this.jsBridge.commentLiked(res => {
        console.log('点赞的评论内容: ', res)

        this.list.forEach((value, index) => {
          if (value.id && value.status) {
            this.checkedGoods.push(value.id)
            this.list[index].liked = 0
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.comments {
  &-item {
    flex-wrap: wrap;
    .van-cell__value /deep/ {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      order: 5;
      width: 100%;
      text-align: left;
      padding-left: 0.95rem;
    }
  }
  &-state {
    font-size: 12px;
    font-weight: 300;
    padding: 10px 0;
  }
  &-inners {
    background: #f2f6f9;
    padding: 10px;
    li {
      font-size: 85%;
      span {
        color: #4b608f;
      }
    }
  }
}
</style>
